<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表页</title>
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="list.css">
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="病人.png" alt="病人" />
      <div class="title">我的博客系统</div>

      <div class="space"></div>

      <a href="博客列表页.html">主页</a>
      <a href="博客编辑页.html">写博客</a>
      <a href="博客登录页.html">退出登录状态</a>
    </div>
    <!-- 页面主体 -->
    <div class="container">
      <div class="container-left">
        <div class="card">
          <img src="病人.png" alt="病人" />
          <h3>s:103</h3>
          <a target="_blank" href="https://gitee.com/carefree-state"
            >我的码云链接</a
          >
          <div class="counter">
            <span class="h">文章</span>
            <span class="h">分类</span>
          </div>

          <div class="counter">
            <span>3</span>
            <span>1</span>
          </div>
        </div>
      </div>
      <div class="container-right">
        <div class="article">
          <div class="blog">
            <div class="title">我的第一篇博客</div>
            <div class="date">2023-05-17 23:00:00</div>
            <!-- 用lorem生产随机字符串 -->
            <div class="content">
              从今天起我要认真敲代码，写博客。 Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Pariatur veniam ad repellat maxime
              quia, eum vitae. Nobis dolores officiis fugiat est possimus animi
              hic quos minima similique vero! Dolorem, natus.
            </div>
            <a href="博客详情页.html"> 查看全文 &gt;&gt;</a>
          </div>
          <div class="blog">
            <div class="title">我的第二篇博客</div>
            <div class="date">2023-05-17 23:00:00</div>
            <!-- 用lorem生产随机字符串 -->
            <div class="content">
              从今天起我一定不会再尿床。 Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Pariatur veniam ad repellat maxime quia, eum
              vitae. Nobis dolores officiis fugiat est possimus animi hic quos
              minima similique vero! Dolorem, natus.
            </div>
            <a href="博客详情页.html"> 查看全文 &gt;&gt;</a>
          </div>
          <div class="blog">
            <div class="title">我的第三篇博客</div>
            <div class="date">2023-05-17 23:00:00</div>
            <!-- 用lorem生产随机字符串 -->
            <div class="content">
              从今天开始我要自己上厕所。 Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Pariatur veniam ad repellat maxime quia, eum
              vitae. Nobis dolores officiis fugiat est possimus animi hic quos
              minima similique vero! Dolorem, natus.
            </div>
            <a href="博客详情页.html"> 查看全文 &gt;&gt;</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
